<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="../project02-code/assets/lib/bootstrap/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="../project02-code/assets/lib/validator/bootstrapValidator.min.css"
    />
  </head>
  <body>
    <form action="" class="container">
      <!-- 账号 -->
      <div class="row mb-4 form-group">
        <span class="iconfont icon-yonghu"></span>
        <input type="text" class="form-control" name="username" />
      </div>
      <!-- 密码 -->
      <div class="row mb-4 form-group">
        <span class="iconfont icon-mima"></span>
        <input type="password" class="form-control" name="password" />
      </div>
      <div class="row mb-4">
        <button type="submit" class="btn btn-primary">注册</button>
      </div>
      <div class="row mb-3">
        <a href="javascript:;">已有账号，去登录</a>
      </div>
    </form>
    <script src="../project02-code/assets/lib/jquery-3.6.0.min.js"></script>
    <script src="../project02-code/assets/lib/bootstrap/bootstrap.min.js"></script>
    <script src="../project02-code/assets/lib/validator/bootstrapValidator.min.js"></script>
    <script>
      // 比如，验证一个用户名和密码
      function test() {
        return {
          fields: {
            username: {
              // 这里username是 input 的name属性值，表示对这个输入框进行验证
              validators: {
                notEmpty: {
                  //不能为空
                  message: '用户名不能为空.',
                },
                stringLength: {
                  //检测长度
                  min: 2,
                  max: 15,
                  message: '用户名需要2~15个字符',
                },
              },
            },
            password: {
              validators: {
                notEmpty: {
                  message: '密码不能为空',
                },
                stringLength: {
                  //检测长度
                  min: 6,
                  max: 15,
                  message: '密码需要6~15个字符',
                },
              },
            },
          },
        }
      }

      //使用插件语法，监听表单的submit事件。当表单提交的时候，就会验证
      // 语法：
      // $('表单').bootstrapValidator(上面的验证函数()).on('success.form.bv', function (e) {}

      // 比如，注册
      $('form')
        .bootstrapValidator(test())
        .on('success.form.bv', function (e) {
          e.preventDefault()
          // 通过验证，这里的代码将会执行。我们将Ajax请求的代码放到这里即可
        })
    </script>
  </body>
</html>
